<style lang="scss">
.page-demo1 {
  .el-select {
    width: 100%;
  }
  .z-form__array-con {
    margin-bottom: 15px;
  }
}
</style>


<template>
  <div class="page-demo1">
    <z-space vertical>
      <h3>form</h3>

      <z-form-template
          :inline="state.inline"
         :slots="search.slots"
         :def="search.def"
          ref="searchForm"
         @fire="search.onFire"
      >
      </z-form-template>

    </z-space>
  </div>
</template>

<script>
import {
  FormInput,
  FormInputNativeNumber,
  FormInputNativeInteger,
  FormSelect,
  FormRadio,
  FormCheckbox, FormBase, FormTextarea, FormDatePicker, FormSimpleUploader, FormImgUploader
} from "@/zpkgs/hooks/form";
import VueCodeMirror from "@example/components/VueCodeMirror";
import DocProps from "@example/plugins/example/components/DocProps";
import {wrapFields} from "../../../static/ext/form/form-utils.js";

import demo1Wrap from "@example/views/form/components/demo1Wrap";
import {END_INDEX, layoutGrid} from "../../../static/ext/form/layout-utils";
import {createDefaultFormSlot} from "../../../static/ext/form/form-slot-utils";
CustomCusComponent.registerOnce(demo1Wrap)

/**
 * TODO
 * img uploader
 */

export default {
  components: {DocProps, VueCodeMirror},
  data() {
    return {
      doc: {
      },
    }
  },
  setup() {
    const {reactive} = globalThis.vueCompositionAPI

    let globalOptions = function () {
      return  [
        {
          label: '选项1',
          value: 'option1',
        },
        {
          label: '选项2',
          value: 'option2',
        }
      ]
    }

    let globalTypeOptions = function () {
      return  [
        {
          label: '个人',
          value: 'user',
        },
        {
          label: '企业',
          value: 'org',
        }
      ]
    }

    function createSet(props, tagProps = {}, layoutDef = [], fieldProps = {}) {
      return wrapFields(
          {
            props: {
              'tag': 'demo1Wrap',
              tagProps,
            },
            ui: fieldProps,
            def: layoutGrid(layoutDef, props)
          }
      )
    }

    let __def = createSet({
      delictId: {
        ...FormSelect('适用案由', {
          options: globalOptions()
        }),
      },
      mattersOfPowerId: {
        ...FormSelect('违法行为', {
          options: globalOptions()
        }),
      },
      briefNumber: {
        ...FormInput('案由编号', {
        }),
      },
      authorityNum: {
        ...FormInput('权力编码', {
        }),
      },
      managementBasisId: {
        ...FormSelect('管理依据', {
          options: globalOptions()
        }),
      },
      legalResponsibilityId: {
        ...FormSelect('法律责任', {
          options: globalOptions()
        }),
      },
      punishmentStandardId: {
        ...FormSelect('处罚规定', {
          options: globalOptions()
        }),
      },
    }, {
      'title': "案件信息"
    }, [
      {start: 0, end: 6, gutter: 20, defaultSpan: 12, spanDef: {6: 24} },
    ])

    let orgSet = createSet({
      org__unitName: {
        ...FormInput('单位名称', {
        }),
      },
      org__organizationCode: {
        ...FormInput('机构代码', {
        }),
      },
      org__partyName: {
        ...FormInput('单位负责人', {
        }),
      },
      org__partyPhone: {
        ...FormInput('联系电话', {
        }),
      },
      org__idCardPicture: {
        ...FormImgUploader('证件照片', {
          widgetConfig: {
            action: 'api/upload'
          }
        }),
      },
      org__partyAddress: {
        ...FormInput('单位地址', {
        }),
      },
    }, {}, [
      {start: 0, end: 5, gutter: 20, defaultSpan: 12 },
    ], {
      condition: 'M(["caseFormOb", "typesOfPart"]) === "org"'
    })

    let userSet = createSet({
      user__partyName: {
        ...FormInput('被处罚对象姓名', {
        }),
      },

      user__partySex: {
        ...FormRadio('性别', {
          options: [
            {
              label: '男',
              value: '0',
            },
            {
              label: '女',
              value: '1',
            }
          ]
        }),
        rules: [],
      },


      user__documentTypeId: {
        ...FormSelect('证件类型', {
          options: globalOptions()
        }),
      },

      user__identificationNumber: {
        ...FormInput('证件号码', {
        }),
      },

      user__partyPhone: {
        ...FormInput('联系电话', {
        }),
      },

      user__partyAddress: {
        ...FormInput('联系地址', {
        }),
      },

      user__idCardPicture: {
        ...FormImgUploader('证件照片', {
          widgetConfig: {
            action: 'api/upload'
          }
        }),
      },
    }, {}, [
      {start: 0, end: 5, gutter: 20, defaultSpan: 12 },
    ],{
      condition: 'M(["caseFormOb", "typesOfPart"]) === "user"'
    })


    let detailSet = createSet({
      timeOfCase: {
        ...FormDatePicker('违章日期', {
        }),
      },

      addressStreet: {
        ...FormInput('案发地点', {
        }),
      },


      addressRoad: {
        ...FormSelect('', {
          options: globalOptions()
        }),
      },

      road: {
        ...FormSelect('路段', {
          options: globalOptions()
        }),
      },

      addressOther: {
        ...FormInput('案发地点', {
        }),
      },

      addr: {
        ...FormInput('违章地点', {
        }),
      },

      caseProfile: {
        ...FormTextarea('案件概况', {
        }),
      },

      lawEnforcingDepartmentName1: {
        ...FormSelect('部门', {
          options: globalOptions()
        }),
      },

      lawEnforcingMemberId1: {
        ...FormSelect('办案人员', {
          options: globalOptions()
        }),
      },

      lawEnforcingMemberId2: {
        ...FormSelect('', {
          options: globalOptions()
        }),
      },
    }, {
      'title': "案件概况"
    }, [
      {start: 0, end: 5, gutter: 20, defaultSpan: 12 },
    ])

    let chufaSet = createSet({
      punishNum: {
        ...FormInput('处罚决定书号', {
        }),
      },

      punishmentMethodId: {
        ...FormSelect('处理方式', {
          options: globalOptions()
        }),
      },

      paymentMethodId: {
        ...FormSelect('处理方式', {
          options: globalOptions()
        }),
      },

      fineNo: {
        ...FormInput('罚没款单编号', {
        }),
      },

      fineAmount: {
        ...FormSelect('罚款金额', {
          options: globalOptions()
        }),
      },
    }, {
      title: '处罚信息'
    }, [
      {start: 0, end: END_INDEX, gutter: 20, defaultSpan: 12 },
    ])


    let search =  {
      slots: {
        object_beforeend: `
<div style="margin-top: 20px;">
${createDefaultFormSlot()}
</div>
`
      },
      def: {
        ui: {
          attrs: Object.entries({
            'test-attr': 1,
          })
        },
        properties: {
          caseFormOb:{
            type: "object",
            properties: {
              ...__def,

              ...createSet({
                typesOfPart: {
                  ...FormSelect('被处罚对象类别', {
                    options: globalTypeOptions()
                  }),
                },
              }, {
                title: '被处罚对象情况'
              }),


              // 企业
              ...orgSet,


              //个人
             ...userSet,


              //案件概况
              ...detailSet,


              //   处罚信息
              ...chufaSet,


              //   案件证据
             ...createSet({
               picList: {
                 type: 'array',
                 items: {
                   type: 'object',
                   properties: {
                     caseOfPictureType: {
                       ...FormSelect('证据类型', {
                         options: globalOptions()
                       }),
                     },
                   }
                 }
               }
             }, {
               title: '案件证据'
             }, [])
            }
          }
        },
      },
      onFire([type, args, ctx] = []) {
        // console.log(type, args, ctx)
        // let d = ctx.getRawData()
        // console.log(d)
      }
    }




    let state = reactive({
      inline: false
    })

    let def = {
      tpl:
`
<z-form-template
   :slots="search.slots"
   :def="search.def"
    ref="searchForm"
   @fire="search.onFire"
>
</z-form-template>
`,
      js: `search = ${ZY.JSON5.stringify(search, null, 2)};

search.onFire = function([type, args, ctx] = []) {
  // console.log(type, args, ctx)
  let d = ctx.getRawData()
  console.log(d)
}
      `
    }

    return {
      search,
      def,
      state,
    }
  }
}
</script>
